<script setup lang="ts">
import { pageBanner } from '~/api'

const props = defineProps<{
  bannerType: 'HOME_PAGE'
}>()

const { basicInfo } = storeToRefs(useTeamInfoStore())

const { isMobile } = storeToRefs(useLayoutStore())

const { data, run } = useRequest(pageBanner, {
  manual: true,
})

watch(() => [basicInfo.value?.scheduleId, props.bannerType], () => {
  if (!basicInfo.value?.scheduleId || !props.bannerType)
    return
  run ({ scheduleId: basicInfo.value.scheduleId, bannerType: props.bannerType })
}, {
  immediate: true,
})

const bgs = computed<{ bg: string[]; h5Bg: string[] }>(() => {
  const a: string[] = []
  const b: string[] = []
  data.value?.data?.forEach((d, i) => {
    if (i % 2 === 0)
      a.push(getAssetUrl(d.fileUrl))

    else
      b.push(getAssetUrl(d.fileUrl))
  })

  return {
    bg: a,
    h5Bg: b,
  }
})
</script>

<template>
  <n-carousel
    autoplay :theme-overrides="{
      dotColor: 'rgba(186, 54, 210, .2)',
      dotColorActive: 'rgba(186, 54, 210, 1)',
      dotColorFocus: 'rgba(186, 54, 210, .2)',
    }"
  >
    <template v-if="!isMobile">
      <img
        v-for="(bg, i) of bgs.bg" :key="i"
        class="carousel-img"
        :src="bg"
      >
    </template>
    <template v-else>
      <img
        v-for="(bg, i) of bgs.h5Bg" :key="i"
        class="carousel-img"
        :src="bg"
      >
    </template>
  </n-carousel>
</template>

<style scoped lang="postcss">
.page-item {
  background-image: var(--page-item-bg);
}
@screen lt-lg {
  .page-item {
    background-image: var(--page-item-h5-bg);
  }
}
.carousel-img {
  width: 100%;
  /* height: calc(100% - var(--app-header-height)); */
  height: 100%;
  object-fit: cover;
}
:deep(.n-carousel__dots .n-carousel__dots--dot) {
  .n-carousel__dot {
    @apply bg-primary bg-opacity-50;
    &.n-carousel__dot--active {
      @apply bg-primary bg-opacity-100;
    }
  }
}
</style>
